<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <script src="/webjars/vue/2.5.17/dist/vue.js"></script>
    <style type="text/css">
        table.pay td, table.pay td input, td.enter, input.enter {
            color: red;
        }

        table.pay td {
            height: 30px;
            vertical-align: middle;
        }

        .getmoney {
            text-align: right;
            font-weight: bold;
        }

        input.enter {
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            border: none;
            margin: 0px;
            padding: 0px;
            background: none;
            width: 90%;
            height: 100%;
            text-align: right;
        }

        table.data tbody td.enter {
            padding: 0px;
            margin: 0px;
            border: 1px solid #000;
            width: 200px;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
        //查询用户
        function findUser() {
            showWindow({url: 'sys_selectUser.html'});
        }

        //交费
        function pay() {
            showDialog('确认交费吗？', function () {
                //回调
                //打印发票
                showWindow({url: 'pay_printInvoice2.html', width: 800, height: 260});
            });
        }

        //选择发票
        function selectInvoice() {
            showWindow({url: 'pay_window_selectInvoice.html'});
        }


    </script>
</head>

<body>

<div id="wrapper">

    <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


    <div id="content" class="xgrid">

        <div class="x12">

            <h2>
                批量收费
            </h2>

            <!------------------------------------- 查询 ------------------------------------->
            <table>
                <tr>
                    <td>用户编码</td>
                    <td><input size="16" v-model="usUser.userno"/></td>
                    <td>用户简码</td>
                    <td><input size="16" v-model="usUser.abc"/></td>
                    <td>短信电话</td>
                    <td><input size="16" v-model="usUser.phone"/></td>
                    <td>联系电话</td>
                    <td><input size="16" v-model="usUser.smsphone"/></td>
                    <td></td>
                </tr>
                <tr>
                    <td>档案编号</td>
                    <td><input size="16" v-model="usUser.docNum"/></td>
                    <td>用户姓名</td>
                    <td><input size="16" v-model="usUser.username"/></td>
                    <td>联系地址</td>
                    <td colspan="4"><input size="16" v-model="usUser.address"/>
                        <a href="javascript:;" class="btn btn-icon btn-small btn-find btn-blue"
                           @click="findUser();"><span></span>查询</a>
                        <a href="javascript:;" class="btn btn-icon btn-small btn-arrow-down btn-blue"
                           @click="addUser()"><span></span>添加用户</a>
                    </td>
                </tr>
            </table>
            <br/>

            <!------------------------------------- 收费 --------------------------------------------->

            <table class="pay">
                <tr>
                    <td>本次实收</td>
                    <td><input class="getmoney" v-model="total" readonly="readonly"/></td>
                    <td width="100">元</td>
                    <td>发票号码</td>
                    <td width="300">
						<span class="text_button">
							<input style="width:120px; text-align:center;" id="fp"/>
							<button @click="selectInvoice();">浏览</button>
						</span>
                    </td>
                    <td>
                        <button @click="pay();"
                                class="btn btn-icon btn-dollar btn-red btn-small"><span></span>交费
                        </button>
                    </td>
                </tr>
            </table>

            <table class="data display">
                <thead>
                <tr>
                    <th>用户编码</th>
                    <th>用户名称</th>
                    <th>用户地址</th>
                    <th class="right">余额</th>
                    <th class="right">欠费</th>
                    <th>本次缴费金额</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody id="addUser">
                </tbody>
            </table>


        </div> <!-- .x12 -->

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->

<script src="../layui/layui.all.js"></script>
<script>
    //删除
    function del(obj) {
        var tr = obj.parentNode.parentNode;
        $(tr).children('td').each(function (i) {  // 遍历 tr 的各个 td
            if (i == 5) {
                num = app.total - ($(this).children().val() - 0);
            }
        });
        app.total = num.toFixed(2);
        var tbody = tr.parentNode;
        tbody.removeChild(tr);
    }

    //回调发票号
    function callback(a) {
        $("#fp").val(a);
    }

    //回调用户编号
    function callback1(id) {
        $.ajax({
            type: 'GET',
            url: "/py-bill/findPybillByUserNo",
            data: {"UserNo": id},
            dataType: 'JSON',
            success: function (json) {
                if (json.code == 200) {
                    if (json.data.billList == '' || json.data.billList == null) {
                        layer.msg("该用户没有缴费单");
                    } else {
                        var num = 0.0;
                        app.billList = json.data.billList;//水费单集合
                        $.each(json.data.billList, function (index) {
                            //计算陈欠总额
                            num = (num + this.billMoney);
                        });
                        app.TotalDue = num;
                    }
                    //用户信息
                    app.usUser = json.data.usUser;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
            }
        });
    }

    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form;
    table = layui.table;
    var app = new Vue({
        el: "#wrapper",
        data: {
            usUser: {//用户信息
                userno: '',
                username: '',
                abc: '',
                createdate: '',
                address: '',
                phone: '',
                smsphone: '',
                areaID: '',
                userType: '',
                payType: '',
                bankName: '',
                bankNum: '',
                formula: '',
                userMoney: '0.0',
                meterID: '',
                docNum: '',
                pwd: '',
                contractNum: '',
                contractDate: '',
                volumeID: '',
                volumeOrderIndex: '',
                disabled: '',
            },
            PyBill: {//水费单
                billNo: '',
                readID: '',
                billMoney: '0.0',
                realMoney: '0.0',
                balance: '',
                invoiceNo: '',
                balanceDate: '',
                BalanceDate: '',
            },
            BilldetailList: '',//水费单详情集合
            PyPayList: '',//历史交费记录集合
            billList: '',//水费单集合
            rdRead: '',//抄表数据
            PyUserhistoryList: '',//用户历史详单
            TotalDue: '0.0',//应交水费总额度
            gettime: '',//当前时间
            payment: {//缴费
                UserNo: '',//用户信息
                RealMoney: '',//实交金额
                invoiceNo: '',//发票号
            },
            total: '0.0',//总金额
        }, methods: {
            //添加用户
            addUser() {
                var bool = true;
                if (app.billList == '' || app.billList == null) {
                    layer.msg("该用户没有缴费单");
                } else {
                    $('#addUser tr').each(function () {// 遍历 tr
                        if (this.id == app.usUser.userno) {
                            layer.msg("请勿重复添加", {icon: 2});
                            bool = false;
                        }
                    });
                    if (bool) {
                        $("#addUser").append("<tr class='odd' id=" + app.usUser.userno + "><td>" + app.usUser.userno + "</td>" +
                            "<td>" + app.usUser.username + "</td>" +
                            "<td>" + app.usUser.address + "</td>" +
                            "<td>" + app.usUser.userMoney.toFixed(2) + "</td>" +
                            "<td>" + app.TotalDue + "</td>" +
                            "<td class='enter'><input class='enter' value=" + (app.TotalDue-app.usUser.userMoney).toFixed(2) + " id='jfje'>元</td>" +
                            "<td>" +
                            "<button class='btn btn-icon btn-mini btn-red btn-cross'  onclick='del(this)'><span></span></button>" +
                            "</td>" +
                            "</tr>");
                    }
                }
                var num = 0.0;
                $('#addUser tr').each(function () {// 遍历 tr
                    $(this).children('td').each(function (i) {  // 遍历 tr 的各个 td
                        if (i == 5) {
                            num = num + ($(this).children().val() - 0);
                        }
                    });
                });
                app.total = num.toFixed(2);
                app.usUser.username = "";
                app.usUser.userno = "";
                app.usUser.abc = "";
                app.usUser.phone = "";
                app.usUser.smsphone = "";
                app.usUser.docNum = "";
                app.usUser.address = "";
            },
            //查询用户信息
            findUser() {
                var index = layer.open({
                    content: 'sys_selectUser.html?Userno=' +
                        '' + app.usUser.userno + '&UserName=' + app.usUser.username + '' +
                        '&abc=' + app.usUser.abc + '&Phone=' + app.usUser.phone +
                        '&smsphone=' + app.usUser.smsphone + '&DocNum=' + app.usUser.docNum + '&Address=' + app.usUser.address,
                    area: ['70%', '80%'],
                    resize: false,
                    shadeClose: true,
                    type: 2,
                    btn: ["关闭"],
                    scrollbar: false,
                });
            },
            //查询可用发票
            selectInvoice() {
                //延迟加载0.5秒
                var index = layer.open({
                    area: ['70%', '80%'],
                    resize: false,
                    shadeClose: true,
                    type: 2,
                    btn: ["关闭"],
                    scrollbar: false,
                    content: 'pay_window_selectInvoice.html',
                });
            },
            //交费
            pay() {
                if(app.total=='0.0'){
                    layer.msg('请选择用户', {icon: 7});
                }else if ($("#fp").val() == '' || $("#fp").val() == '') {
                    layer.msg('请选择发票', {icon: 7});
                } else {
                    showDialog('确认交费吗？', function () {
                        var index = layer.load(0, {shade: false});
                        setTimeout(function () {
                            layer.msg("交费成功",{icon:1});
                            $("#addUser").find("tr").remove();
                            layer.close(index);
                        }, 1000);
                            // app.payment.UserNo = app.usUser.userno;//用户信息
                            // app.payment.RealMoney = $(".getmoney").val();//实交金额
                            // app.payment.invoiceNo = $("#fp").val();//发票号
                            // $.ajax({
                            //     type: 'POST',
                            //     url: "/py-bill/payment",
                            //     data: app.payment,
                            //     dataType: 'json',
                            //     success: function (json) {
                            //         layer.msg(json.message);
                            //     }
                            // });
                            // layer.load(1);
                            // //延迟加载0.5秒
                            // setTimeout(function () {
                            //     layer.closeAll('loading');
                            //     var index = layer.open({
                            //         area: ['70%', '80%'],
                            //         resize: false,
                            //         shadeClose: true,
                            //         type: 2,
                            //         btn: ["关闭"],
                            //         scrollbar: false,
                            //         content: 'pay_printInvoice.html',
                            //     });
                            // }, 500);
                        }
                    );
                }
            },
        },
        created() {

        }
    });
</script>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

    });


</script>

</body>

</html>